import React, { useCallback } from 'react';
import { useNavigate } from 'react-router-dom';

import { useCinema } from '../hooks/useCinema';

export default function Cinema(props) {
  const { list, cityName } = useCinema();

  const navigate = useNavigate();

  const handleClick = useCallback(() => {
    navigate('/city');
  }, [navigate]);

  return (
    <div>
      <div onClick={handleClick}>{cityName}</div>
      <ul>
        {list.map((item) => {
          return <li key={item.cinemaId}>{item.name}</li>;
        })}
      </ul>
    </div>
  );
}
